<route lang="json5" type="page">
{
  "name": "oneKeyMove",
  "layout": "default",
  "style": {
    "disableScroll": true,
    "navigationStyle": "default",
    "enablePullDownRefresh": false,
    "navigationBarBackgroundColor": "#F8F8F8",
    "navigationBarTitleText": "挪车码"
  }
}
</route>

<script setup lang="ts">
import { watch } from 'vue'
import {
  checked,
  contact,
  contactError,
  contactValid,
  generateQrCode,
  inputType,
  onContactInput,
  onDelete,
  onInput,
  oneKeyMoveUrl,
  showKeyboard,
  value,
  visible,
} from './index'

// 监听新能源状态变化，重置车牌号
watch(checked, () => {
  value.value = ''
})

// 监听showKeyboard状态同步visible
watch(showKeyboard, (newVal) => {
  visible.value = newVal
})

// 监听visible状态同步showKeyboard
watch(visible, (newVal) => {
  showKeyboard.value = newVal
})

// 渲染车牌输入格子
function renderPlateChars() {
  const length = checked.value ? 8 : 7
  const chars = []

  for (let i = 0; i < length; i++) {
    const char = value.value[i] || ''
    const isFilled = !!char
    const isActive = !isFilled && i === value.value.length && showKeyboard.value

    chars.push({
      char,
      isFilled,
      isActive,
      showDot: i === 1, // 第2个字符后都显示点
    })
  }

  return chars
}
</script>

<template>
  <view class="main-page">
    <!-- 小程序码展示 -->
    <view class="mvc-image">
      <image
        :src="oneKeyMoveUrl"
        mode="aspectFit"
        class="h-400rpx w-400rpx"
      />
    </view>

    <!-- 车牌信息 -->
    <view class="mvc-plate-info">
      <!-- 新能源选择 -->
      <view class="mvc-plate-new-energy">
        <wd-switch v-model="checked" size="48rpx" />
      </view>

      <!-- 车牌输入 -->
      <view class="mvc-plate-input">
        <view class="plate-input-container" @tap="showKeyboard = true">
          <template v-for="(item, index) in renderPlateChars()" :key="index">
            <view
              class="plate-char"
              :class="{
                filled: item.isFilled,
                active: item.isActive,
              }"
            >
              {{ item.char }}
            </view>
            <!-- 第二个字符后都显示点 -->
            <view v-if="item.showDot" class="plate-dot" />
          </template>
        </view>

        <wd-keyboard
          v-model:visible="visible"
          mode="car"
          :title="value"
          @input="onInput"
          @delete="onDelete"
        />
      </view>
    </view>

    <!-- 联系信息输入 -->
    <view class="contact-info">
      <view class="contact-input-group">
        <view class="contact-label">
          联系方式
        </view>
        <view
          class="contact-input-container"
          :class="{
            valid: contactValid && contact,
            invalid: contactError,
          }"
        >
          <image
            :src="inputType === '1' ? 'https://img.zwfcyy.top/echo-app/icon/svg/phone.svg' : (inputType === '2' ? 'https://img.zwfcyy.top/echo-app/icon/svg/email.svg' : 'https://img.zwfcyy.top/echo-app/icon/svg/remind-b.svg')"
            class="contact-icon"
            mode="aspectFit"
          />
          <input
            class="contact-input"
            type="text"
            placeholder="请输入手机号码或邮箱地址"
            :value="contact"
            @input="onContactInput"
          >
        </view>
        <view v-if="contactError" class="error-message">
          {{ contactError }}
        </view>
      </view>
    </view>

    <!-- 生成按钮 -->
    <view class="create-mvc">
      <wd-button type="primary" size="large" block @click="generateQrCode">
        生成挪车码
      </wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
  @import url("./index.scss");
</style>
